/**
 *@auther: tang
 @Date: 2020-11-14
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import {Button, message, Table,DatePicker} from "antd";
import Req from "../../../api"
const {RangePicker} = DatePicker
const columns = [
    {
        title: 'ID',
        dataIndex: 'log_id',
    },
    {
        title: '操作者',
        dataIndex: 'log_actionUser',
    },
    {
        title: '操作时间',
        dataIndex: 'log_date',
    },
    {
        title: 'IP地址',
        dataIndex: 'log_ip',
    },
    {
        title: '操作记录',
        dataIndex: 'log_action',
    },
];

class AdminLogs extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            initLogs:[],
            selectedRowKeys: [], // 默认选中的行
            loading: false,
            tableLoading:true,
            dateP:[],
            limit:10,
            page:1
        }
    }
    start = () => {
        this.setState({ loading: true });
        // 这里请求
        Req.delAdmLogs({log_ids:this.state.selectedRowKeys}).then(res=>{

            this.setState({
                loading:false
            })
            message.success("删除成功");
            this.getLogs();
        }).catch(err=>{
            message.error("服务器开小差了")
            this.setState({
                loading:false
            });
            this.getLogs()
        })
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };
    componentWillMount() {
        this.getLogs()
    }
    getLogs(limit,page){
        Req.getAdmLogs({limit,page}).then(res=>{
            console.log(res);
            let data = res.logData;
             data.forEach(item=>{
                item.key = item.log_id+item.log_date
            })
            this.setState({
                initLogs:data,
                tableLoading:false
            })
        }).catch(err=>{
            console.log(err);
            this.setState({
                tableLoading:false
            })
        })
    }
    dateOnchange =(date)=>{
        console.log(date);
        this.setState({
            dateP:date
        })
        if (date.length>0){
            this.condiGetLogs(date[0]._d,date[1]._d,this.state.limit,this.state.page)
        }else{
            this.getLogs(this.state.limit,this.state.page)
        }

    }
    condiGetLogs(startDate,endDate,limit,page){
        this.setState({
            page:1
        })
        Req.getLogsCondition({startDate,endDate,limit,page}).then(res=>{
            console.log(res);
            this.setState({
                initLogs:res.logData
            })
        }).catch(err=>{
            console.log(err)
        })
    }
    onPageChange(page,limit){
        let state = this.state;
        if (this.state.dateP.length>0){
            this.condiGetLogs(state.dateP[0]._d,state.dateP[1],limit,page)
        }else{
            this.getLogs(limit,page)
        }

    }
    render() {
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div>
                <RangePicker showTime placeholder={["开始时间","结束时间"]} onChange={this.dateOnchange}/>
                <div style={{ marginBottom: 16 }}>
                    <span style={{ marginLeft: 8 }}>
            {hasSelected ? `已选中 ${selectedRowKeys.length} 条记录` : ''}
          </span>
                </div>
                <Table pagination={{
                    defaultCurrent:this.state.page,
                    pageSize:this.state.limit,
                    onChange: this.onPageChange.bind(this)
                }} loading={{spinning:this.state.tableLoading}} rowSelection={rowSelection} columns={columns} dataSource={this.state.initLogs?this.state.initLogs:null} />
                <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
                    删除
                </Button>
            </div>
        )
    }
}

export {AdminLogs as default}
